// 大轮播图
let date = (function () {

    let container = document.querySelector('#container1'),
        slideList = Array.from(container.querySelectorAll('.wrapper .slide')),
        paginationList = Array.from(container.querySelectorAll('.pagination ul li')),
        btnPrev = document.querySelector('.btn-prev'),
        btnNext = document.querySelector('.btn-next');


    //count 轮播的数量  interval时因子   speed 每一次切换的时间（过度的时间），step 当前展示的索引，prev 上一张展示的索引  autoTimer 自动轮播的定时器 
    let count = slideList.length,
        interval = 2000,
        speed = 300,
        step = 0,
        prev = 0,
        autoTimer = null;




    //设置定义初始样式  
    const initial = function initial() {
        //边界判断
        step = step < 0 ? 0 : (step > count - 1 ? count - 1 : step);
        perv = step;
        // if (step < 0) step = 0;
        // if (step > count - 1) step = count - 1;
        //将获取的slideList集合循环，得到每一个slide索引下标
        slideList.forEach((slide, index) => {
            //刚初始没有slide没有动画效果
            slide.style.transitionDuration = '0ms';
            //就是当前索引step，等于当前的index下标
            if (step === index) {
                //就默认当前的slide展示
                slide.style.opacity = 1;
                slide.style.zIndex = 1;
                return;
            }
            //其余的slide移出
            slide.style.opacity = 0;
            slide.style.zIndex = 0;
        });
        //将获取的 paginationList集合循环，得到每一个pagination索引下标
        paginationList.forEach((pagination, index) => {
            //给分页器添加active
            if (index === step) {
                pagination.className = "active";
                return;
            }
            pagination.className = '';
        })
    };
    initial();
    //控制切换
    //控制分页器对齐的
    const autoFocus = function autoFocus() {
        //控制当前选中，上一个移出选中
        paginationList[step].className = 'active';
        paginationList[prev].className = '';
        //把当前索引赋值给prev，作为下一次切换的上一个索引
        prev = step;

    }
    //通过控制当前索引，来实现上一张或下一张的切换时的过渡效果
    const move = function move() {
        //定义两个变量，来装
        let cur = slideList[step];
        let pre = slideList[prev];
        // 先改层级
        cur.style.zIndex = 1;
        pre.style.zIndex = 0;
        // 在改透明度
        cur.style.transitionDuration = speed + 'ms';
        cur.style.opacity = 1;
        cur.ontransitionend = () => {
            pre.style.transitionDuration = '0ms';
            pre.style.opacity = 0;
        };
        // 分页器对齐
        autoFocus();
    }
    //切换到上一张
    const moveToNext = function moveToNext() {
        step++;
        if (step > count - 1) step = 0;
        move();
    }
    //切换到下一张
    const moveToPrev = function moveToPrev() {
        step--;
        if (step < 0) step = count - 1;
        move();
    }
    // 控制运动
    //自动轮播
    if (autoTimer === null) {
        autoTimer = setInterval(moveToPrev, interval);
    }

    container.onmouseenter = function () {
        clearInterval(autoTimer);
        autoTimer = null;
    };
    // 进入离开容器，控制自动轮播的暂停和重启
    container.onmouseleave = function () {
        if (autoTimer === null) {
            autoTimer = setInterval(moveToPrev, interval);
        }
    }
    // 浏览器页卡切换，原始页卡对应的页面虽然不在渲染，但是定时器还在动
    // 所以当页卡切换的时候，也控制自动轮播的暂停和重启
    document.onvisibilitychange = function () {
        if (document.hidden) {
            //离开页面
            clearInterval(autoTimer);
            autoTimer = null;
            return;
        }
        //重新加载
        if (autoTimer === null) {
            autoTimer = setInterval(moveToPrev, interval);
        }
    }
    //给点击按钮做节流操作
    btnNext.onclick = _.throttle(moveToNext, 1000);
    btnPrev.onclick = _.throttle(moveToPrev, 1000);

    // 点击分页器切换
    paginationList.forEach((pagination, index) => {
        pagination.onmouseenter = function () {
            if (step === index) return;
            step = index;
            move();
        }
    })





})()
// 选项卡
let tabs = (function () {
    let videoTitle = document.querySelector('.videoTitle');
    let liList = videoTitle.querySelectorAll('li');
    let divList = document.querySelectorAll('.videoBody');
    for (let i = 0; i < liList.length; i++) {
        liList[i].index = i;
        liList[i].onmouseenter = function () {
            for (let j = 0; j < liList.length; j++) {
                liList[j].className = "";
                divList[j].className = "videoBody";
            }
            this.className = 'current1';

            // className是替换类名，而classList是添加样式类名
            divList[this.index].classList.add('current');
            // var newI = this.index;
            // divList[newI].className = 'current';
        }
    }
})();
// 同步轮播
let tongub = (function () {
    let containerList = Array.from(document.querySelectorAll('.container5'));
    containerList.forEach(container => {
        let wrapper = container.querySelector('.wrapper'),
            slideList = Array.from(wrapper.querySelectorAll('.slide')),
            paginationList = Array.from(container.querySelectorAll('.pagination span')),
            btnPrev = container.querySelector('.btn-prev'),
            btnNext = container.querySelector('.btn-next');

        let count = slideList.length,
            step = 0,
            interval = 6000,
            speed = 10,
            autoTimer = null,
            w = container.offsetWidth;



        /* 初始化样式 */
        const autoFocus = function autoFocus() {
            let temp = step;
            if (temp >= count - 1) temp = 0;
            paginationList.forEach((pagination, index) => {
                if (index === temp) {
                    pagination.className = 'active';
                    return;
                }
                pagination.className = '';
            });
        };
        const swiperInit = function swiperInit() {
            // 克隆第一张
            let clone = slideList[0].cloneNode(true);
            wrapper.appendChild(clone);
            count++;
            slideList.push(clone);
            wrapper.style.width = `${count * w}px`;

            // 控制默认选中
            if (step < 0) step = 0;
            if (step > count - 1) step = count - 1;
            wrapper.style.transitionDuration = '0ms';
            wrapper.style.left = `${-step * w}px`;
            autoFocus();
        };
        swiperInit();

        /* 控制切换 */
        const moveToNext = function moveToNext() {
            step++;
            if (step >= count) {
                // 立即运动到第一张
                wrapper.style.transitionDuration = `0ms`;
                wrapper.style.left = `0`;
                step = 1;
                wrapper.offsetWidth; //获取元素样式，刷新渲染队列，让上述样式立即渲染一次
            }
            wrapper.style.transitionDuration = `${speed}ms`;
            wrapper.style.left = `${-step * w}px`;
            autoFocus();
        };
        const moveToPrev = function moveToPrev() {
            step--;
            if (step < 0) {
                // 立即运动到克隆第一张
                wrapper.style.transitionDuration = `0ms`;
                wrapper.style.left = `${-(count - 1) * w}px`;
                step = count - 2;
                wrapper.offsetWidth;
            }
            wrapper.style.transitionDuration = `${speed}ms`;
            wrapper.style.left = `${-step * w}px`;
            autoFocus();
        };

        /* 控制运动 */
        if (autoTimer === null) autoTimer = setInterval(moveToNext, interval);

        container.onmouseenter = function () {
            clearInterval(autoTimer);
            autoTimer = null;
        };
        container.onmouseleave = function () {
            if (autoTimer === null) autoTimer = setInterval(moveToNext, interval);
        };
        document.onvisibilitychange = function () {
            if (document.hidden) {
                clearInterval(autoTimer);
                autoTimer = null;
                return;
            }
            if (autoTimer === null) autoTimer = setInterval(moveToNext, interval);
        };

        btnPrev.onclick = _.throttle(moveToPrev, speed);
        btnNext.onclick = _.throttle(moveToNext, speed);

        paginationList.forEach((pagination, index) => {
            pagination.onclick = function () {
                if (step === index) return;
                step = index;
                wrapper.style.transitionDuration = `${speed}ms`;
                wrapper.style.left = `${-step * w}px`;
                autoFocus();
            };
        });
    });

})();




